<!--
 * @name warnUp
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-01
 -->

<template>
  <div class="p-schedule common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
    ></page-title>
    <div class="conetnt">
      <div class="item" v-for="(item, index) in dataList" :key="index">
        <div class="item-left">
          <div class="start-time">{{ item.StartTime }}</div>
        </div>
        <div class="item-right">
          <div class="right-top">
            <div style="padding-left: 1.25rem">{{ item.MatchName }}</div>
          </div>
          <img src="@/assets/img/scb/line-divide.png" alt="" width="100%" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import Config from '@/assets/js/config'
import PageTitle from '@/components/scb/PageTitle.vue'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const params = ref({})
const procName = ref([])

const gameInfo = ref({
  discipline: '马术',
  match: '2025-11-09',
  event: 'EVENTEAM',
  type: '今日赛程',
})

const dataList = ref([
  // {
  //   match: '',
  //   startTime: '08:00',
  // },
  // {
  //   match: '场地障碍团体赛 决赛第一轮',
  //   startTime: '08:00',
  // },
  // {
  //   match: '场地障碍个人赛 团体赛第二轮（个人资格赛第二轮）',
  //   startTime: '16:00',
  // },
  // {
  //   match: '场地障碍团体赛 决赛第二轮',
  //   startTime: '16:00',
  // },
])

onBeforeMount(() => {})
onMounted(() => {
  gameInfo.value.match = route.query.MatchDate
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

watchEffect(() => {
  dataList.value = []
  if (results.value?.recordset?.length) {
    dataList.value = results.value.recordset || []
    // dataList.value = dataList.value.map((item) => {
    //   return {
    //     ...item,
    //     StartTime: item.StartTime.replace(/^0/, ''),
    //   }
    // })
  }
})

watch(
  () => route.query,
  (val) => {
    params.value = val
    gameInfo.value.match = val.MatchDate
    getData()
  }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/scb/schedule';
</style>
